import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter APP", style: TextStyle(color: Colors.white)),
          backgroundColor: Colors.blue,
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  List<Widget> _initGridViewData() {
    List<Widget> tempList = [];
    for (var i = 0; i < 12; i++) {
      tempList.add(
        Container(
          alignment: Alignment.center,
          decoration: const BoxDecoration(color: Colors.blue),
          child: Text("第$i个元素", style: const TextStyle(fontSize: 20)),
        ),
      );
    }
    return tempList;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      // 通过他可以快速的创建横轴子元素为固定最大长度的GridView
      padding: EdgeInsets.all(10), // GridView的内边距
      crossAxisSpacing: 10, // 水平子Widget之间的间距
      mainAxisSpacing: 10, // 垂直子Widget之间的间距
      maxCrossAxisExtent: 250, // 横轴子元素的最大长度
      childAspectRatio: 0.7, // 子Widget的长宽比
      children: _initGridViewData(),
    );
  }
}
